<template>
    <el-dialog title="添加" width="600px" class="icon-dialog" :visible.sync="show" @close="closeForm()" append-to-body>
			<el-form :size="size" ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="应用类型" prop="app_type">
					<el-radio v-model="form.app_type" :label="2">api应用</el-radio>
          <el-radio v-model="form.app_type" :label="3">rpc应用</el-radio>
          <el-radio v-model="form.app_type" :label="4">消费队列</el-radio>
          <el-radio v-model="form.app_type" :label="5">websocket</el-radio>
          <el-radio v-model="form.app_type" :label="6">定时任务</el-radio>
				</el-form-item>
				<el-form-item label="应用名" prop="application_name">
					<el-input v-model="form.application_name" placeholder="请输入应用名称"  />
				</el-form-item>
				<el-form-item label="应用路径" prop="app_dir">
					<el-input v-model="form.app_dir" placeholder="请输入应用路径"/>
				</el-form-item>
				<el-form-item label="应用端口" prop="port">
					<el-input v-model="form.port" placeholder="请输入应用端口号"/>
				</el-form-item>
        <el-form-item label="限流" prop="limit">
					<el-input v-model="form.limit" placeholder="请输入限流值，不限制则设置为留空"/>
				</el-form-item>
        <el-row>
						<el-form-item label="默认装载功能" prop="expand">
							<el-checkbox-group v-model="form.expand">
								<el-checkbox key="0" label="mysql">mysql</el-checkbox>
                <el-checkbox key="1" label="mongodb">mongodb</el-checkbox>
                <el-checkbox key="2" label="redis">redis</el-checkbox>
                <el-checkbox key="3" label="es">es</el-checkbox>
                <el-checkbox key="4" label="jwt">jwt</el-checkbox>
                <el-checkbox key="5" label="beanstalkd">beanstalkd</el-checkbox>
                <el-checkbox key="6" label="rabbitmq">rabbitmq</el-checkbox>
                <el-checkbox key="7" label="kafka">kafka</el-checkbox>
                <el-checkbox key="8" label="oss">oss上传</el-checkbox>
                <el-checkbox key="13" label="aliSms">阿里云短信</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
       </el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button :size="size" :loading="loading" type="primary" @click="submit" >
					<span v-if="!loading">确 定</span>
					<span v-else>提 交 中...</span>
				</el-button>
				<el-button :size="size" @click="closeForm">取 消</el-button>
			</div>
		</el-dialog>
</template>

<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        form: {
          application_name:'',
          app_dir:'',
          app_type:2,
          connect:'mysql',
          limit:'10000',
          expand:[],
        },
        loading:false,
        tableList:[],
        connects:[],
        size:'small',
        rules: {
          application_name: [{ required: true, message: '请输入应用名', trigger: 'blur' }],
          app_dir: [{ required: true, message: '请输入应用目录名', trigger: 'blur' }],
          port: [{ required: true, message: '请设置应用端口号', trigger: 'blur' }],
        },
      }
    },
    methods: {
      submit(){
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.loading = true
            this.$axios.post('/admin/Sys/Base/createApplication',this.form).then(res => {
              if(res.data.status == 200){
                this.$message({message: '操作成功', type: 'success'})
                this.$emit('refesh_list')
                this.closeForm()
              }else{
                this.loading = false
              }
            }).catch(()=>{
              this.loading = false
              this.$message.error(res.data.msg)
            })
          }
        })
      },
      closeForm(){
        this.$emit('update:show', false)
        this.loading = false
        if (this.$refs['form']!==undefined) {
          this.$refs['form'].resetFields();
        }
      }
    },
  }
</script>